<template>
    <FrameWork>
    </FrameWork>
    <ContentField>
       <div style="matgin: 2px auto;">
         <form @submit.prevent="addData">
                <div style="matgin: 2px auto;">
                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                    <div class="col-auto">
                        <label class="col-form-label">&nbsp;&nbsp;工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
                    </div>
                    <div class="col-auto">
                        <input v-model="workno" type="text" minlength="4" maxlength="10" name="workno" class="form-control" required>
                    </div>
                    </div>
                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                        <div class="col-auto">
                            <label class="col-form-label">&nbsp;&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
                        </div>
                        <div class="col-auto">
                            <input v-model="name" type="text" name="name" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group" ><label>&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" v-model="gender" value="1" required>
                            <label class="form-check-label" for="inlineRadio1">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" v-model="gender" value="0" required>
                            <label class="form-check-label" for="inlineRadio2">女</label>
                        </div>
                    </div>

                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                        <div class="col-auto">
                            <label class="col-form-label">&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</label>
                        </div>
                        <div class="col-auto">
                            <input v-model="age" type="number" min="0" max="150" name="age" class="form-control" required>
                        </div>
                    </div>
                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                        <div class="col-auto">
                            <label class="col-form-label">&nbsp;&nbsp;身份证号:</label>
                        </div>
                        <div class="col-auto">
                            <input v-model="idcard" type="text" minlength="18" maxlength="18" name="idcard" class="form-control" required>
                        </div>
                    </div>
                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                        <div class="col-auto">
                            <label class="col-form-label">&nbsp;&nbsp;住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</label>
                        </div>
                        <div class="col-auto">
                            <input v-model="address" type="text" name="address" class="form-control" required>
                        </div>
                    </div>
                    <div class="row g-3 align-items-center" style="margin-bottom: 10px;">
                        <div class="col-auto">
                            <label class="col-form-label">&nbsp;&nbsp;入职日期:</label>
                        </div>
                        <div class="col-auto">
                            <input v-model="entrydate" type="date"  min="1949-01-01" max="2023-12-31" name="entrydate" class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="form-group" style="text-align:center;">
                    <div class="error-message">{{ error_message }}</div>
                    <button class="btn btn-primary" type="submit" style="width:20%;margin-top:10px;">添加数据</button>
                </div>
        </form>
       </div>
    </ContentField>
  </template>
  
  
  
  <script>
  
  import FrameWork from '@/components/admin/FrameWork.vue';
  import ContentField from '@/components/commons/ContentField.vue';
  import {ref} from 'vue';
  import router from '@/router/index';
  import $ from 'jquery';
  import {useStore} from 'vuex';

  export default{
    name: 'AddDataView',
    components:{
        FrameWork,
        ContentField,
    },
  
    setup(){
        const store = useStore();
        let workno = ref('');
        let name = ref('');
        let gender = ref('');
        let age = ref('');
        let idcard = ref('');
        let address = ref('');
        let entrydate = ref('');
        let error_message = ref('');   


        const addData = () => {
            console.log(workno.value);
            console.log(name.value);
            console.log(gender.value);
            console.log(age.value);
            console.log(idcard.value);
            console.log(address.value);
            console.log(entrydate.value);

            $.ajax({   //添加数据
                url: "http://localhost:8090/sls/empdt/addData",
                type: "post",
                data: { 
                    workno : workno.value,
                    name : name.value,
                    gender : gender.value,
                    age : age.value,
                    idcard : idcard.value,
                    address : address.value,
                    entrydate : entrydate.value, 
                },            
                headers: {
                // Authorization: "Bearer " +localStorage.getItem('jwt_token'),
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    router.push({name: 'defaultDBManage'});  //添加成功,跳转到用户管理页面
                  }else{
                    error_message.value = resp.error_message;
                    console.log(resp);
                  }
                },
                error(resp){
                    console.log(resp);
                }
           });

        }
         
    return {
        workno,
        name,
        gender,
        age,
        idcard,
        address,
        entrydate ,
        error_message,
        addData,
        }
    }
    
  }
  
  </script>
  
  
  
  <style scoped>

  .form-group{
    margin: 5px auto;
  }
  .error-message{
          color:red;
  }
  
  </style>